<!DOCTYPE html>
<!--支付页-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>支付页</title>
    <!-- Bootstrap -->
    <link href="../userResource/css/test.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../userResource/css/pay.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/paycart.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/base.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/index.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/login.css">

    <style>
        .otherPage {
            height: 100%;
            min-height: 100px;
            max-height: 1000px;
            width: 100%;
            margin-bottom: 100px;
        }

        .page {
            width: 100%;
        }
    </style>
    <style>

    </style>
</head>

<body style="text-align: left;">

<!--头部导入-->
<div id="header"></div>

<!-- 右侧悬浮条 -->
<div class="fixed_bar">
    <dl>
        <dd class="center">
            <a href="javascript:void(0);" target="_blank" class="needLogin"><span></span></a>
            <p class="tip"><a href="javascript:void(0);" class="needLogin">个人中心</a></p>
        </dd>
        <dd class="my_like">
            <a href="favorite.html" target="_blank" class="needLogin"><span></span></a>
            <p class="tip"><a href="javascript:void(0);" class="needLogin">我的关注</a></p>
        </dd>
        <dd class="fixed_cart_tip">
            <a href="shoppingcart.html"><span><i></i>购物车<font class="cartNum">0</font></span></a>
        </dd>
        <dd class="online">
            <a href="javascript:void(0);" target="_blank" class="needLogin"><span></span></a>
            <p class="tip"><a href="javascript:void(0);" target="_blank" class="needLogin">在线客服</a></p>
        </dd>
    </dl>
    <p class="go_top" title="Scroll Back to Top" style="opacity: 0;"><a href="javascript:void(0)"><span></span></a></p>
</div>

<!--添加弹出层-->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="tableModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!--弹出层标题-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addModalLabel">添加地址</h4>
            </div>
            <div id="alertBlock"></div>

            <!--弹出层主体-->
            <div class="modal-body">
                <form class="form-horizontal" id="form-add">
                    <div class="form-group">
                        <input type="hidden" id="uid-add" name="uid"/>
                    </div>
                    <!--第一行：商品名字，商品价格-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地址：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="address">
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="add_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 购物车商品主体 -->
<div class="wrap" style="margin-top: 35px">
    <input type="hidden" id="selectAddr" value="addr0" data-addressid="">
    <input type="hidden" id="orderid" value="null">
    <div class="cart_send">
        <div class="cf send_header">
            <div class="f_left title">
                <h1>结算页</h1>
            </div>
            <ul class="f_right step">
                <li class="finish"><p><span>1</span></p><font>我的购物车</font></li>
                <li class="ongoing"><p><span>2</span></p><font>填写核对订单信息</font></li>
                <li><p><span>3</span></p><font>提交支付</font></li>
            </ul>
        </div>
        <!-- 收货人信息 -->
        <div class="address">
            <div class="cf title">
                <a href="javascript:void(0)" class="f_right address_add" id="address-add"><span></span>新增收货地址</a>
                收货人信息
            </div>
            <div class="address_list">
                <table cellspacing="0" cellpadding="0" class="list" style="margin-left:20px">
                    <tbody id="addrbody" style="margin-left: 100px">
                    </tbody>
                </table>
            </div>
            <p class="address_more" style="display: none;"><a href="javascript:void(0)" class="">更多地址<span></span></a>
            </p>
        </div>
        <!-- 确认商品 -->
        <div class="buying_list">
            <p class="title"><a href="shoppingcart.html" class="f_right">返回购物车</a>确认商品</p>
            <table cellspacing="0" cellpadding="0">
                <tbody id="probody">
                </tbody>
            </table>
        </div>
        <!-- 结算 -->
        <div class="cf statement">
            <!--<table cellpadding="0" cellspacing="0" class="f_left">-->
            <!--<tbody>-->
            <!--<tr>-->
            <!--<th>优惠券</th>-->
            <!--<td>-->
            <!--<select id="couponSelect" name="coupon" class="my_select" onchange="selectCoupon()">-->
            <!--<option value="0">&#45;&#45; 选择优惠券 &#45;&#45;</option>-->

            <!--</select>-->
            <!--</td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<th>输入优惠券</th>-->
            <!--<td>-->
            <!--<input type="text" class="text" id="newCouponKey">-->
            <!--<input type="button" value="兑换" class="btn btn_bindCoupon">-->
            <!--</td>-->
            <!--</tr>-->
            <!--</tbody>-->
            <!--</table>-->
            <table cellpadding="0" cellspacing="0" class="f_right">
                <tbody>
                <tr>
                    <th>商品数量：</th>
                    <td id="itemNum">4</td>
                </tr>
                <tr>
                    <th>折扣：</th>
                    <td id="itemDiscount">¥0.00</td>
                </tr>
                <tr>
                    <th></th>
                    <td id="shippingFeeAmount"></td>
                </tr>
                <tr class="total">
                    <th>合计：</th>
                    <td id="itemTotal">¥659.00</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 立即支付 -->
        <div class="pay_immediately">
            <input type="hidden" name="token" id="token" value="RraxBPvQbfGtBsOUP2j2uaBGi1ekEmQvznw">
            <input type="hidden" id="sumPrice" value="64400">
            <input type="hidden" id="couponPrice" value="0">
            <input type="hidden" id="discountPrice" value="0">
            <input type="hidden" id="shippingFeePrice" value="1500">
            <!--需要自己修改支付页面的调整方式-->
            <input type="button" value="提交订单" class="btn btn_js" id="paySubmitBtn">
        </div>
    </div>
</div>

<!-- iframe -->
<div class="otherPage">
    <!--底部footer-->
    <iframe style="height: 550px" class="page" src="footer.html" scrolling="no" frameborder="no"></iframe>
</div>

<!--jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!--myself script-->
<script src="../vendors/myself/myself.js"></script>
<script src="../vendors/myself/payDetail.js"></script>

<!-- 初始化头部页面，按键事件绑定 -->
<script type="text/javascript">
    $(function () {
        $('#header').load('header.html');
    });

    // 添加地址弹出层
    $('#address-add').click(function () {
        $('#addModel').modal();
    });

    // 添加地址弹出层保存按钮事件
    $('#add_submit').click(function () {
        var formData = $('#form-add').serializeObject();
        $.ajax("/addre/addAddres", {
            type: 'post',
            datatype: 'json',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function (data) {
                window.location.reload();
                $('#myAlert').alert();
            },
            error: function (data) {
                $('#alertBlock').html('<div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>保存失败。 </div>');
            }
        });
    });

</script>

<!--从session获取到订单号码, 或传uid来state = 1来获取 orderid-->
<script type="text/javascript">
    //地址选择事件，隐藏表单 id="selectAddr"
    function selectAddr(e) {
        var hi = $("#selectAddr");
        var old = document.getElementById(hi.val());
        //去除旧的
        var child = old.childNodes;
        $.each(child, function (i, child) {
            console.info(child);
            if (child.tagName == "EM")
                old.removeChild(child);
        });
        //添加新的
        var id = e.getAttribute("id");
        e.innerHTML = e.innerHTML + "<em></em>";
        $("#selectAddr").val(id);
        // $('#paySubmitBtn').attr('onclick', 'window.open(\'payresult.html?addressid=' + $("#" + id).attr('value') + ')');
        $('#selectAddr').attr('data-addressid', $("#" + id).attr('value'))
    }

    //有用
</script>

<!-- 初始化 -->
<script type="text/javascript">
    //请求后端，获取数据   有用
    $(function () {
        //获得用户
        var uid;
        $.ajax({
            url: "/user/getLoginedUser"
            , data: {}
            , async: false//同步
            , type: "GET"
            , success: function (data) {
                uid = data.rows.uid;
                $('#uid-add').val(data.rows.uid);
            }
        });
        //获取地址，渲染
        var data = {}
        data.uid = uid;
        $.ajax({
            url: "/addre/getAddres"
            , type: "POST"
            , data: data
            , async: false//同步
            , success: function (data) {
                //渲染页面
                var body = document.getElementById("addrbody");
                renderAddr(body, data);
                $('#selectAddr').attr('data-addressid', data.rows[0].addressid);
                // $('#paySubmitBtn').attr('onclick', 'window.open(\'payresult.html?addressid=' + data.rows[0].addressid + '\')')
                //添加选择事件
                var hi = $("#selectAddr");
                var old = document.getElementById(hi.val());
                old.innerHTML = old.innerHTML + "<EM></EM>"

            }
        })
        //根据uid来获取订单信息
        $(function () {
            var uid;
            $.ajax({
                url: "/order/getDetailOrder"
                , type: "post"
                , dataType: "json"
                , async: false
                , data: {}
                , success(data) {
                    $("#orderid").attr("value", data.rows.oid);
                    var body = document.getElementById("probody");
                    // body.innerText="<input type='text'>"
                    var re = rederItem(body, data.rows.OrderDetailPojos);
                    $("#itemNum").text(re.num);
                    $("#itemTotal").text(re.total);
                    $("#itemDiscount").text(0);
                }
            });
        })
    });
</script>

<!-- mission -->
<!--新增收货地址 1-->
<!--url=/addre/addAddres-->
<!-- 提交订单 -->
<script type="text/javascript">
    $('#paySubmitBtn').click(function () {
        var data = {};
        data.oid = $("#orderid").val();
        data.address = $("#selectAddr").attr("data-addressid");
        data.total = $("#itemTotal").text();


        $.ajax('/order/submitDetail', {
            // data: JSON.parse(),
            // data: JSON.parse('{"addressid":'+$("#selectAddr").attr("data-addressid")+',"total": '+$("#itemTotal").text()+',"oid": '+$("#orderid").val()+'}'),
            contentType: 'application/json',
            type: 'get',
            data: 'addressid='+$('#selectAddr').attr('data-addressid')+'&total='+$('#itemTotal').text()+'&oid='+$('#orderid').val(),

            success: function () {
                window.location.href = "payresult.html";
            }
        })
    });
</script>
<!--url=/order/submitDetail-->
</body>
</html>